<template>
  <div class="center">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card style="margin-left:20px">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div style="margin-left:200px"><el-avatar :size="160" :src="circleUrl" /></div>
          <div style="margin-top:50px;" class="infos">
            <ul>
              <li>账号名称<div>{{ user.name }}</div></li><hr>
              <li>用户昵称<div> 22 </div></li><hr>
              <li>所属部门<div> 部门 </div></li><hr>
              <li>手机号码<div>{{ user.phone }}</div></li><hr>
              <li>用户邮箱<div>{{ user.email }}</div></li><hr>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="快速修改" name="first">
              <el-form ref="userForm" :model="user" :rules="userRules" :inline="true" label-width="80px">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="user.username" style="width:600px" />
                </el-form-item>

                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="user.phone" style="width:600px" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="user.email" style="width:600px" />
                </el-form-item>
                <el-form-item label="部门" prop="id">
                  <el-select v-model="user.id" placeholder="请选择部门" style="width:600px">
                    <el-option
                      v-for="item in user.deptList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="岗位" prop="ids">
                  <el-select
                    v-model="user.ids"
                    multiple
                    collapse-tags
                    placeholder="请选择岗位"
                    style="width:600px"
                  >
                    <el-option
                      v-for="item in user.jobList"
                      :key="item.ids"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="ids">
                  <el-select
                    v-model="user.ids"
                    multiple
                    collapse-tags
                    placeholder="请选择角色"
                    style="width:800px"
                  >
                    <el-option
                      v-for="item in user.roleList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio v-model="user.gender" label="男" style="width:100px">男</el-radio>
                  <el-radio v-model="user.gender" label="女" style="width:100px">女</el-radio>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="历史操作" name="second">
              <!-- 列表 -->
              <el-table
                ref="logTable"
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column prop="description" label="操作描述" width="width" />
                <el-table-column prop="requestIp" label="IP" width="width" />
                <el-table-column prop="address" label="IP来源" width="width" />

                <el-table-column prop="browser" label="浏览器" width="width" />
                <el-table-column prop="time" label="请求耗时" width="width">
                  <template slot-scope="{ row }">
                    <el-tag v-if="row.time<=1000" type="success">{{ row.time }}ms</el-tag>
                    <el-tag v-else-if="row.time>1000&&row.time<=2000" type="warning">{{ row.time }}ms</el-tag>
                    <el-tag v-else type="danger">{{ row.time }}ms</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="操作时间"
                  width="width"
                />
              </el-table>
              <!-- 分页组件 -->
              <el-pagination
                :current-page="page.current"
                :total="page.total"
                :page-size="page.size"
                :page-sizes="[10, 20, 50, 100]"
                style="padding: 20px 0"
                layout="total,prev, pager, next, sizes,jumper"
                @current-change="initLogTable"
                @size-change="handleSizeChange"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'Center',
  data() {
    return {
      circleUrl: 'https://ez-plan.oss-cn-hangzhou.aliyuncs.com/v2-3964cdd02890a922436133a927a2e17b_r.jpg?Expires=1670600476&OSSAccessKeyId=TMP.3KdPzRzed3go1QuyiZPBaWZLfA8usfZJDrUuqkJaMDbhj7m7awsWa1kArcigBSM5UnoinG1PUnLzu8UaLvJ29XxcnxvjRF&Signature=2hx6H2lyX0K5bZldDz65jDjGL4M%3D',
      page: {
        total: 0, // 总记录数
        current: 1, // 当前页码
        size: 10, // 每页记录数
        orders: [{ column: 'id', asc: true }]
      },
      activeName: 'first',
      user: {
        id: undefined,
        name: '',
        gender: '',
        phone: undefined,
        email: '',
        roleIds: [],
        ids: [],
        deptId: undefined,
        roleList: [],
        jobList: [],
        deptList: []
      }
    }
  },
  mounted() {
    this.initUserInfo()
    this.initLogTable()
  },
  methods: {
    async initUserInfo() {
      const result = await this.$API.user.getInfo()
      if (result.code === 200) {
        this.user = result.data
      }
    },
    /*
      列表选中状态发生改变的监听回调
    */
    handleSelectionChange(selection) {
      this.selectedIds = selection.map((item) => item.logId)
    },
    async initLogTable(current = 1) {
      const { page } = this
      if (Number.isInteger(current)) {
        page.current = current
      }
      const result = await this.$API.adminLog.pageQueryUser(page)
      if (result.code === 200) {
        this.tableData = result.data.records
        this.page.current = result.data.current
        this.page.size = result.data.size
        this.page.total = result.data.total
      }
    },
    /*
    处理pageSize发生改变的监听回调
    */
    handleSizeChange(pageSize) {
      this.page.size = pageSize
      this.initLogTable()
    }
  }
}
</script>

<style scoped>
 .center{
  margin: 20px 20px 20px 0;
 }
 .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .infos>ul>li{
    list-style: none;margin-top: 20px;
  }
  .infos>ul>li>div{
    float: right;
  }
</style>
